<template>
	<div style="z-index: 999">
		<canvas ref="pixiCanvas"></canvas>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as PIXI from 'pixi.js'
const pixiCanvas = ref(null)
const rotationSpeed = 0.005
onMounted(() => {
	// const app = new PIXI.Application({
	// 	width: 800,
	// 	height: 600,
	// 	antialias: true,
	// 	view: pixiCanvas.value
	// })
	// const ellipse1 = new PIXI.Graphics()
	// const ellipse2 = new PIXI.Graphics()

	// const centerX = app.renderer.width / 2
	// const centerY = app.renderer.height / 2
	// const majorAxis = 150
	// const minorAxis = 80

	// const rotationSpeed = 0.01 // 旋转速度

	// // 绘制第一个椭圆
	// ellipse1.beginFill(0x333333)
	// ellipse1.drawEllipse(centerX, centerY, majorAxis, minorAxis)
	// ellipse1.endFill()

	// // 绘制第二个椭圆，通过水平对称
	// ellipse2.beginFill(0x333333)
	// ellipse2.drawEllipse(centerX, centerY, majorAxis, minorAxis)
	// ellipse2.endFill()
	// ellipse2.scale.y = -1

	// app.stage.addChild(ellipse1)
	// app.stage.addChild(ellipse2)

	// app.ticker.add(() => {
	// 	ellipse1.rotation += rotationSpeed
	// 	ellipse2.rotation -= rotationSpeed

	// 	// 计算第二个椭圆的位置，使长轴端点与第一个椭圆完全对接
	// 	const offset = majorAxis / 2 // 长轴的一半
	// 	const angle = ellipse2.rotation
	// 	const xOffset = offset * Math.cos(angle)
	// 	const yOffset = offset * Math.sin(angle)

	// 	ellipse2.position.set(centerX + xOffset, centerY + yOffset)
	// })
})
</script>

<style scoped>
/* 样式 */
</style>
